<template>
  <view class="">
    <view class="back_img">
      <image :src="albums.cover">
        <view class="text">
          <view class="left">{{albums.name}}</view>
          <view class="rigth">关注专辑</view>
        </view>
    </view>
    <view class="author">
      <view class="author_info">
        <image :src="albums.user.avatar" mode="widthFix"></image>
        <text>{{albums.user.name}}</text>
      </view>
      <view class="desc">
        <text>{{albums.desc}}</text>
      </view>
    </view>
    <view class="album_list">
 <go-detail class="list_item" v-for="(item,index) in wallpaper" :key="item.id" :list="wallpaper" :index="index">
   <image :src="item.thumb+item.rule.replace('$<Height>',360)" mode="aspectFill"></image>
 </go-detail>
    </view>
  </view>
</template>

<script>
import GoDetail from "components/home/GoDetail";
export default {
  name: "",
  components: {
     GoDetail
  },
  data() {
    return {
      params: {
        limit: 30,
        order: "new",
        skip: 0,
        first: 1, //为一是表示第一次请求数据，有album对象，
        //为0时，不是第一次，没有album
      },
      id: -1,
      albums: {},
      wallpaper: [],
      hasMore:true
     
     
    };
  },
  onLoad(option) {
    console.log(option);
    this.id = option.id;
    this.getDetail();
  },
onReachBottom(){
if(this.hasMore){
  this.params.skip+=this.params.limit
  this.params.first=0
  this.getDetail()
}
else{
  uni.showToast({
    title: '已全部加载完毕',
    
  });
}
},

  methods: {
    getDetail() {
      this.$request({
        url: `http://157.122.54.189:9088/image/v1/wallpaper/album/${this.id}/wallpaper`,
        data: this.params,
      }).then((res) => {
        const ress = res.data.res;
        console.log(ress);
       if(Object.keys(ress.album).length){
          this.albums=ress.album
       }
        if(ress.wallpaper.length===0){
          this.hasMore=false
          uni.showToast({
    title: '已全部加载完毕',
                        });
          return
        }
        this.wallpaper=[...this.wallpaper,...ress.wallpaper]
  
       
      
       
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.back_img {
  position: relative;
  img {

  }

  .text {
    display: flex;
position: absolute;
justify-content: space-between;
bottom: 8rpx;
left: 0;
right: 0;
color: white;
padding: 0 12rpx;
    .left {
      font-size: 40rpx;

    }

    .rigth {
      padding: 8rpx 12rpx;
      border-radius: 8rpx;
      background-color: rgb(238, 82, 129);

    }
  }
}
.author {
 
  padding: 26rpx 16rpx;
  .author_info {
    margin-bottom: 16rpx;
  
    image {
        vertical-align: middle;
      display: inline-block;
      width: 80rpx;
      height: 80rpx;

    }

    text {
      margin-left: 20rpx;
      font-size: 32rpx;
      color: black;

    }
  }


}
.album_list {
  display: flex;
  flex-wrap: wrap;
  .list_item {
    flex: 30%;
    padding: 3rpx;
    image {
height: 160rpx;
    }
  }
}
</style>
